<script setup lang="ts">
import { computed } from 'vue';
import type { TuiAsideProps } from './types';

// 设置默认值
const props = withDefaults(defineProps<TuiAsideProps>(), {
  width: 'auto',
  scrollHidden: false
});

// 计算样式
const asideStyle = computed(() => {
  return {
    width: props.width
  };
});
</script>

<template>
  <aside :style="asideStyle" class="tui-aside" :class="{ 'tui-aside--scroll-hidden': props.scrollHidden }">
    <slot></slot>
  </aside>
</template>

<style lang="scss" scoped>
.tui-aside {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: var(--tui-box-shadow);
  min-height: 100%;
}
</style>